<template>
	<a-modal v-bind="options" class="bill-add-dialog">
		<a-form ref="formRef" :model="entity">
			<!--重置表单作用-->
			<a-form-item :name="['billForm', 'bizType']" hidden />
			<a-form-item :name="['billFlowForm', 'paymentAccount']" hidden />
			<!--重置表单作用-->
			<a-form-item :name="['billForm', 'bizId']" :rules="[{required: true, message: '请选择一条数据进行添加'}]">
				<a-input-group compact class="display-flex">
					<a-form-item-rest>
						<a-select
							v-model:value="entity.billForm.bizType"
							:disabled="[1, 3].includes(props?.contractType || 0)"
							style="width: 150px"
							@change="onBizTypeChange">
							<a-select-option
								v-if="!houseId || houseDetail?.renterContractId || [31, 32, 33, 34].includes(props.query?.contractStatus)"
								:value="2">
								租客
							</a-select-option>
							<a-select-option
								v-if="![1, 2].includes(props?.contractType) && (!houseId || houseDetail?.houseBase?.ownerContractId)"
								:value="1">
								业主
							</a-select-option>
							<a-select-option :value="5">房源</a-select-option>
						</a-select>
						<a-select
							v-model:value="entity.billForm.bizId"
							v-bind="searchOptions"
							:disabled="Boolean(props.houseId)"
							style="flex: 1">
							<template v-if="loadings.search" #notFoundContent>
								<a-spin spinning tip="正在搜索，请稍候……" />
							</template>
							<template #option="item">
								<!--业主、租客-->
								<template v-if="[1, 2].includes(entity.billForm.bizType)">
									{{ item.label }}
									<a-divider dashed class="margin-none" />
									<a-typography-text type="secondary">
										{{ item.houseAddress }}
										({{ formatDate(item.beginTime) }} 至 {{ formatDate(item.endTime) }})
									</a-typography-text>
								</template>
								<!--房源-->
								<template v-else-if="entity.billForm.bizType === 5">
									<template v-if="item.houseAlias">
										<a-tag color="blue">{{ item.houseAlias }}</a-tag>
									</template>
									{{ item.houseAddress }}
								</template>
							</template>
						</a-select>
					</a-form-item-rest>
				</a-input-group>
			</a-form-item>
			<a-typography-text strong>
				<blockquote>费用信息</blockquote>
			</a-typography-text>
			<vxe-grid ref="grid" :data="entity.billDetailFormList" v-bind="gridOptions">
				<template #direction="{row, rowIndex}">
					<a-form-item :name="['billDetailFormList', rowIndex, 'direction']" required has-feedback>
						<template #help />
						<a-select placeholder="请选择" v-model:value="row.direction" :options="feeOptions" style="width: 100%" />
					</a-form-item>
				</template>
				<template #subject="{row, rowIndex}">
					<a-form-item :name="['billDetailFormList', rowIndex, 'feeSubjectId']" required has-feedback>
						<template #help />
						<a-select
							v-model:value="row.feeSubjectId"
							:options="costTypes"
							show-search
							option-filter-prop="name"
							:field-names="{label: 'name', value: 'id', options: 'metaList'}"
							placeholder="请选择费用科目"
							style="width: 100%" />
					</a-form-item>
				</template>
				<template #amount="{row, rowIndex}">
					<a-form-item :name="['billDetailFormList', rowIndex, 'originalMoney']" required has-feedback>
						<template #help />
						<a-input-number
							v-model:value="row.originalMoney"
							:min="0"
							:precision="2"
							placeholder="请输入"
							style="width: 100%"
							@blur="limitMax" />
					</a-form-item>
				</template>
				<template #action="{rowIndex}">
					<a-button type="link" danger @click="delBill(rowIndex)">删除</a-button>
				</template>
				<template #bottom>
					<vxe-toolbar perfect>
						<template #buttons>
							<span>费用总计&nbsp;</span>
							<span v-color="{color: totalAmount < 0 ? 'danger' : 'primary'}">{{ totalAmount.toLocaleString() }}</span>
							<span>&nbsp;元</span>
						</template>
						<template #tools>
							<a-button type="link" size="small" @click="addBill">
								<template #icon>
									<plus-square-outlined />
								</template>
								添加费用
							</a-button>
						</template>
					</vxe-toolbar>
				</template>
			</vxe-grid>
			<br />
			<a-row :gutter="24">
				<a-col :span="6">
					<a-form-item label="账单类型" name="billType">
						<a-select v-model:value="entity.billType" @change="billTypeChange" placeholder="请选择账单类型">
							<a-select-option :value="1">独立账单</a-select-option>
							<a-select-option :value="2" v-if="billList && billList.length">周期账单</a-select-option>
						</a-select>
					</a-form-item>
				</a-col>
				<template v-if="entity.billType === 2">
					<a-col :span="10">
						<a-form-item label="账单周期" name="billId" :rules="[{required: true, message: '请选择账单周期'}]">
							<a-select
								v-model:value="entity.billId"
								show-search
								:options="billList"
								:field-names="{value: 'id'}"
								placeholder="请选择账单周期"
								style="width: 100%">
								<template #option="item">
									{{ item.label }}
									<a-divider dashed class="margin-none" />
									<a-typography-text type="secondary">
										{{ formatDate(item.beginTime) }}
										-
										{{ formatDate(item.endTime) }}
									</a-typography-text>
								</template>
							</a-select>
						</a-form-item>
					</a-col>
				</template>
				<template v-else>
					<a-col :span="10">
						<a-form-item label="费用周期" name="feeCycle" :rules="[{required: true, message: '请选择费用周期'}]">
							<a-range-picker v-model:value="entity.feeCycle" :value-format="DATE_FORMAT.DATE" style="width: 100%" />
						</a-form-item>
					</a-col>
					<a-col :span="8">
						<a-form-item
							label="应收(付)时间"
							:name="['billForm', 'predictTime']"
							:rules="[{required: true, message: '请选择应收(付)时间'}]">
							<a-date-picker
								v-model:value="entity.billForm.predictTime"
								:value-format="DATE_FORMAT.DATE"
								style="width: 100%" />
						</a-form-item>
					</a-col>
				</template>
			</a-row>
			<a-typography-text strong>
				<blockquote>支付详情</blockquote>
			</a-typography-text>
			<!-- 实际收款 -->
			<a-row :gutter="24">
				<a-col :span="12">
					<a-form-item
						label="客户姓名"
						:name="['billFlowForm', 'payerName']"
						:rules="[{required: true, message: '请输入客户姓名'}]">
						<a-input v-model:value="entity.billFlowForm.payerName" placeholder="请输入客户姓名" />
					</a-form-item>
				</a-col>
				<a-col :span="12">
					<a-form-item
						label="客户电话"
						:name="['billFlowForm', 'payerPhone']"
						:rules="[{required: true, message: '请输入客户电话'}]">
						<a-input v-model:value="entity.billFlowForm.payerPhone" placeholder="请输入客户电话" :maxlength="11" />
					</a-form-item>
				</a-col>
				<template v-if="hasPaid">
					<a-col :span="12">
						<a-form-item
							label="支付时间"
							:name="['billFlowForm', 'practicalTime']"
							:rules="[{required: true, message: '请选择支付时间'}]">
							<a-date-picker
								:disabled-date="disabledDatePayMent"
								v-model:value="entity.billFlowForm.practicalTime"
								value-format="YYYY-MM-DD HH:mm:ss"
								style="width: 100%"
								:show-time="{format: 'HH:mm'}"
								@change="changeDateTime" />
						</a-form-item>
					</a-col>

					<a-col :span="12">
						<a-form-item
							label="支付方式"
							:name="['billFlowForm', 'paymentMethod']"
							:rules="[{required: true, message: '请选择支付方式'}]">
							<a-input-group compact class="display-flex">
								<a-form-item-rest>
									<a-select
										v-model:value="entity.billFlowForm.paymentMethod"
										:options="paymentMethods"
										:field-names="DEFAULT_FIELD_NAME"
										placeholder="支付方式"
										style="width: 120px" />
									<a-input
										v-model:value="entity.billFlowForm.paymentAccount"
										placeholder="请输入客户账号"
										style="flex: 1" />
								</a-form-item-rest>
							</a-input-group>
						</a-form-item>
					</a-col>
				</template>
				<!-- <a-col :span="24">
					<a-form-item label="支付备注" :name="['billFlowForm', 'comment']">
						<a-textarea v-model:value="entity.billFlowForm.comment" show-count :maxlength="200" placeholder="请输入支付备注" />
					</a-form-item>
				</a-col> -->
			</a-row>
			<a-typography-text strong>
				<blockquote>账单备注</blockquote>
			</a-typography-text>
			<a-form-item label="账单备注" :name="['billForm', 'comment']">
				<a-textarea v-model:value="entity.billForm.comment" show-count :maxlength="200" placeholder="请输入账单备注" />
			</a-form-item>
			<a-form-item label="账单凭证">
				<file-upload v-model:files="files" show-qr-code show-tips />
			</a-form-item>
		</a-form>
	</a-modal>
</template>
<script lang="ts" setup>
	import {computed, reactive, ref, toRef, watch, watchEffect} from 'vue'
	import {FormInstance, message} from 'ant-design-vue'
	import {PlusSquareOutlined} from '@ant-design/icons-vue'
	import {getOwnerContractDetail, getRenterContractDetail} from '@/api/contract'
	import {addFinanceAndDetail, billBizSearch, getSimpleBillByBizId} from '@/api/bill'
	import DATE_FORMAT, {formatDate, nowDateTime} from 'yuxin-base/src/utils/date'
	import SettingApi from 'yuxin-base/src/api/setting-api'
	import {Img} from 'yuxin-base/src/types'
	import {DEFAULT_FIELD_NAME, DIC_LABEL_MAP, DIC_PID_MAP} from 'yuxin-base/src/constant'
	import {VxeGridInstance, VxeGridProps} from 'vxe-table'
	import FileUpload from '@/components/common/file-upload.vue'
	import houseApi from '@/api/house-api'
	import {HouseBase, HouseDetail} from '@/interface/house'
	import dayjs, {Dayjs} from 'dayjs'

	const props = defineProps<{
		visible: boolean
		houseId?: string
		query?: any
		contractType?: number | null
	}>()

	const loadings = reactive({
		search: false
	})

	const emits = defineEmits(['update:visible', 'close'])
	/** 当前选中的合同类型 1 个人 2 企业 3业主 */
	const contractType = ref<number | null>(1)
	const options = reactive({
		title: '添加账单',
		width: 1200,
		centered: true,
		maskClosable: false,
		destroyOnClose: true,
		confirmLoading: false,
		visible: toRef(props, 'visible'),
		onOk() {
			submit()
		},
		onCancel() {
			emits('update:visible', false)
			setTimeout(() => emits('close'), 100)
			files.value = []
			houseDetail.value = undefined
			formRef.value?.resetFields()
			entity.billDetailFormList = [defaultBill()]
		}
	})

	const feeOptions = [
		{
			value: 10,
			label: '预计收入'
		},
		{
			value: 11,
			label: '实际收入'
		},
		{
			value: 20,
			label: '预计支出'
		},
		{
			value: 21,
			label: '实际支出'
		}
	]

	const grid = ref<VxeGridInstance>()
	const gridOptions = reactive<VxeGridProps>({
		size: 'small',
		height: 300,
		rowConfig: {
			isHover: true
		},
		columns: [
			{
				title: '收支类型',
				minWidth: 120,
				slots: {
					default: 'direction'
				}
			},
			{
				title: '费用科目',
				minWidth: 200,
				slots: {
					default: 'subject'
				}
			},
			{
				title: '金额(元)',
				minWidth: 120,
				slots: {
					default: 'amount'
				}
			},
			{
				title: '操作',
				width: 100,
				align: 'center',
				fixed: 'right',
				slots: {
					default: 'action'
				}
			}
		]
	})

	// 默认账单
	const defaultBill = () => ({
		direction: null,
		// 是否已发生【0预计发生1实际发生】
		isOccur: null,
		// 原始金额【预计费用金额】
		originalMoney: null,
		// 费用方向【1收入2支出】
		feeDirection: null,
		// 费用科目id【字典】
		feeSubjectId: null
	})

	// 凭证文件
	const files = ref<Img[]>([])
	// 表单
	const entity = reactive<any>({
		// 关联账单ID
		billId: null,
		billType: 1,
		feeCycle: [],
		// 账单表Form
		billForm: {
			// 业务类型【1业主2租客3日租4民宿（订单）5房屋6供应商】
			bizType: 2,
			// 业务ID【合同id、订单号、...】
			bizId: null,
			// 账单备注
			comment: null,
			// 附件
			attachments: null
		},
		// 添加账单支付详情Form
		billFlowForm: {
			// 实际收付时间
			practicalTime: null,
			// 支付方式
			paymentMethod: null,
			// 备注
			comment: null,
			// 收付款姓名
			payerName: null,
			// 收付款手机号
			payerPhone: null,
			// 收付款账号类型【1银行卡2支付宝3微信】
			paymentAccountType: null,
			// 收付款账号
			paymentAccount: null,
			// 收付款账号开户行
			bankName: null,
			// 收付款账号开户支行
			branchBankName: null
		},
		// 账单集合
		billDetailFormList: [defaultBill()]
	})

	// 关联账单列表
	const billList = ref<any[]>([])
	watchEffect(() => {
		if (entity.billForm.bizId) {
			// 周期账单
			getSimpleBillByBizId(entity.billForm.bizId).then(({data = []}) => {
				for (let item of data) {
					item.label = item.billName
					if (item.period > 0) {
						item.label += `（第${item.period}期）`
					}
				}

				billList.value = data
			})
		}
	})

	// 房源详情
	const houseDetail = ref<HouseDetail>()
	const houseData = ref<any>()
	watch(
		() => [houseDetail.value, entity.billForm.bizType],
		() => {
			if (props.houseId && houseDetail.value) {
				if (entity.billForm.bizType == 1 || props?.contractType == 3) {
					//从业主合同详情进入账单列表，禁用账单类型未租客。获取业主合同详情
					entity.billForm.bizId = houseDataInfo.value.value
					searchOptions.options = [houseDataInfo.value]
					searchOptions.onSelect(props.houseId, houseDataInfo.value)
					// entity.billForm.bizType = 1
					return
				}
				houseData.value = {
					label: houseDetail.value.fullAddress,
					value: houseDetail.value.id,
					deptId: houseDetail.value.deptId,
					houseId: houseDetail.value.id,
					houseAlias: houseDetail.value.houseBase?.houseAlias,
					houseAddress: houseDetail.value.fullAddress
				}

				const renterContract = houseDetail.value?.renterContract || {}
				if (entity.billForm.bizType === 2) {
					houseData.value.value = renterContract.id
					houseData.value.name = renterContract.contractType === 2 ? renterContract.lesseeName : renterContract.renterName
					houseData.value.phone = renterContract.contractType === 2 ? renterContract.lesseePhone : renterContract.renterPhone

					if (renterContract.contractType === 2) {
						houseData.value.label = renterContract.lesseeName + '/' + renterContract.lesseePhone
					} else {
						houseData.value.label = renterContract.renterName + ' / ' + renterContract.renterPhone
					}
				}

				entity.billForm.bizId = houseData.value.value
				searchOptions.options = [houseData.value]
				searchOptions.onSelect(props.houseId, houseData.value)
			}
		}
	)

	// 费用科目
	const costTypes = ref<any[]>([])
	// 支付方式
	const paymentMethods = ref<any[]>([])
	// 判断是否有实际发生的账单
	const hasPaid = computed(() => {
		// 11、实际收入，21、实际支出
		return entity.billDetailFormList.map((o: any) => o.direction).some((o: number) => [11, 21].includes(o))
	})

	watchEffect(() => {
		if (props.visible) {
			console.log(props.contractType, 'contractType1111')
			SettingApi.getDicListByLabel(DIC_LABEL_MAP['FEESUBJECT']).then(({data}) => {
				costTypes.value = data.filter(v => !!v.metaList.length)
			})
			SettingApi.getDicListByPid(DIC_PID_MAP['PAYMENTMETHOD@PAYMENTMETHOD']).then(({data}) => (paymentMethods.value = data))

			if (props.houseId) {
				houseApi.getHouseRoom(props.houseId).then(({data}) => {
					houseDetail.value = data
					console.log(houseDetail.value?.houseBase?.ownerContractId, 'houseDetail.value?.houseBase?.ownerContractId ')
					if (!houseDetail.value?.renterContractId) {
						entity.billForm.bizType = 5
					}
					if (data?.houseBase?.ownerContractId) {
						entity.billForm.bizType = 1
						getOwnerContract()
					}
					if (houseDetail.value?.renterContractId) {
						entity.billForm.bizType = 2
					}
					if (props?.contractType == 3) {
						entity.billForm.bizType = 1
					}

					// 如果是 已退租状态的 使用之前的合同 需要查合同详情 获取租客信息
					if ([31, 32, 33, 34].includes(props.query?.contractStatus)) {
						entity.billForm.bizType = 2
						getContract()
					}

					// if (!houseDetail.value?.renterContractId && !houseDetail.value?.houseBase?.ownerContractId) {
					// 	entity.billForm.bizType = 5
					// } else if (!houseDetail.value?.renterContractId && houseDetail.value?.houseBase?.ownerContractId) {
					// 	entity.billForm.bizType = 1
					// }
				})
				// if (entity.billForm.bizType == 1 || props?.contractType == 3) {
				// 	entity.billForm.bizType = 1
				// 	//从业主合同详情进入账单列表，禁用账单类型未租客。获取业主合同详情
				// 	getOwnerContract()
				// }
			}
		}
	})
	const houseDataInfo = ref<any>({})
	const getOwnerContract = async () => {
		let res: any = await getOwnerContractDetail(props?.query?.bizId || houseDetail.value?.houseBase?.ownerContractId)
		if (res) {
			let renterInfo = res.data.renterInfo
			let house = res.data.house
			houseDataInfo.value = {
				label: house.fullAddress,
				value: house.id,
				deptId: house.deptId,
				houseId: renterInfo.houseId,
				houseAlias: house.houseBase?.houseAlias,
				houseAddress: house.address
			}

			houseDataInfo.value.value = renterInfo.contractId
			houseDataInfo.value.name = renterInfo.lesseeName
			houseDataInfo.value.phone = renterInfo.lesseePhone
			houseDataInfo.value.label = renterInfo.lesseeName + '/' + renterInfo.lesseePhone
			if (entity.billForm.bizType == 1 || props?.contractType == 3) {
				entity.billForm.bizId = houseDataInfo.value.value
				searchOptions.options = [houseDataInfo.value]
				searchOptions.onSelect(props.houseId, houseDataInfo.value)
			}
		}
	}
	watch(
		() => hasPaid.value,
		newVal => {
			if (newVal) {
				entity.billFlowForm.practicalTime = dayjs().format(DATE_FORMAT.DATETIME)
			} else {
				entity.billFlowForm.practicalTime = null
			}
		}
	)

	const billTypeChange = () => {
		if (entity.billType === 1) {
			entity.billId = null
		} else {
			entity.feeCycle = []
			entity.billForm.predictTime = null
		}
	}

	// 总金额计算
	const totalAmount = computed(() => {
		let total = 0
		for (let item of entity.billDetailFormList) {
			total += (item.originalMoney || 0) * ([10, 11].includes(item.direction || 10) ? 1 : -1)
		}

		return Number(total.toFixed(2))
	})

	const placeholderMap = reactive<any>({
		2: '请输入客户姓名、客户电话、房源编号、房源地址进行搜索',
		1: '请输入业主姓名、业主电话、房源编号、房源地址进行搜索',
		5: '请输入房源编号、房源地址进行搜索'
	})

	const searchOptions = reactive<any>({
		options: [],
		showSearch: true,
		filterOption: false,
		placeholder: computed(() => placeholderMap[entity.billForm.bizType]),
		onSearch(like: string) {
			if (!like && !like.trim()) {
				return
			}

			loadings.search = true
			billBizSearch(entity.billForm.bizType, like)
				.then(({data}) => {
					const result = data.result || []

					for (const item of result) {
						if (entity.billForm.bizType === 5) {
							item.label = item.houseAddress
						} else {
							item.label = item.name + ' / ' + item.phone
						}
						// 租客获取合同id、房源获取房源id
						item.value = item.orderId || item.contractId || item.houseId
					}

					searchOptions.options = result
				})
				.finally(() => (loadings.search = false))
		},
		onSelect(value: string, item: any) {
			entity.billId = null
			entity.billForm.deptId = item.deptId
			entity.billForm.houseId = item.houseId
			entity.billForm.houseAddress = item.houseAddress

			entity.billFlowForm.payerName = item.name
			entity.billFlowForm.payerPhone = item.phone
			contractType.value = item.contractType
		}
	})

	const onBizTypeChange = () => {
		if (!props.houseId) {
			searchOptions.options = []
			entity.billForm.bizId = null
			entity.billFlowForm.payerName = null
			entity.billFlowForm.payerPhone = null
		}
		//  else {
		// 	if (entity.billForm.bizType == 1) {
		// 		entity.billForm.bizId = houseDataInfo.value.value
		// 		searchOptions.options = [houseDataInfo.value]
		// 		searchOptions.onSelect(props.houseId, houseDataInfo.value)
		// 	} else {
		// 		entity.billForm.bizId = houseData.value.value
		// 		searchOptions.options = [houseData.value]
		// 		searchOptions.onSelect(props.houseId, houseData.value)
		// 	}
		// }
	}

	const limitMax = () => {
		entity.billDetailFormList.forEach((i, index) => {
			// 限制金额最大为九位整数
			if (i.originalMoney >= Number(9999999999)) {
				entity.billDetailFormList[index].originalMoney = Number(999999999)
			}
		})
	}

	// 添加账单
	const addBill = () => {
		entity.billDetailFormList.push({})
		grid.value?.loadData(entity.billDetailFormList)
	}

	// 删除账单
	const delBill = (index: number) => {
		entity.billDetailFormList.splice(index, 1)
		grid.value?.loadData(entity.billDetailFormList)
	}

	// 表单实例
	const formRef = ref<FormInstance>()
	const submit = () => {
		formRef.value?.validate().then(() => {
			if (totalAmount.value > Number(999999999)) {
				message.error('总金额超出999999999.99，请检查输入金额')
				return
			}
			const feeCycle = entity.feeCycle || []

			entity.billForm.beginTime = feeCycle[0]
			entity.billForm.endTime = feeCycle[1]

			// 凭证列表
			entity.billForm.attachments = files.value.map(o => o.id).join()

			for (let item of entity.billDetailFormList) {
				item.isOccur = Number([11, 21].includes(item.direction))
				item.feeDirection = Math.floor(item.direction / 10)
			}

			// 如果是 已退租状态的 传入合同id 帮助后台绑定账单
			if ([31, 32, 33, 34].includes(props.query?.contractStatus)) {
				entity.billForm.bizId = props.query?.bizId
			}

			options.confirmLoading = true
			addFinanceAndDetail(entity)
				.then(() => {
					message.success('账单添加成功')
					options.onCancel()
				})
				.finally(() => (options.confirmLoading = false))
		})
	}

	// 支付时间日期禁用
	const disabledDatePayMent = (current: Dayjs) => {
		return current && current > dayjs().endOf('day')
	}
	const range = (start: number, end: number) => {
		const result = []

		for (let i = start; i < end; i++) {
			result.push(i)
		}

		return result
	}

	// 支付时间日期时分秒禁用
	// const disabledDateTime = () => {
	// 	return {
	// 		disabledHours: () => range(0, 24).splice(Number(entity.billFlowForm.practicalTime?.slice(11, 13)) + 1, 24),
	// 		disabledMinutes: () => range(entity.billFlowForm.practicalTime?.slice(14, 16), 60),
	// 		disabledSeconds: () => [0, 60]
	// 	}
	// }

	// 日期变化时触发
	const changeDateTime = (date: any) => {
		if (dayjs(date).isAfter(nowDateTime())) {
			message.warning('设定超过当前时间')
			entity.billFlowForm.practicalTime = nowDateTime()
		}
	}

	const getContract = () => {
		getRenterContractDetail(props?.query?.bizId).then(res => {
			let renterInfo = res.data.renterInfo
			let house = res.data.house
			houseDataInfo.value = {
				label: house.fullAddress,
				value: house.id,
				deptId: house.deptId,
				houseId: renterInfo.houseId,
				houseAlias: house.houseBase?.houseAlias,
				houseAddress: house.address
			}

			houseDataInfo.value.value = renterInfo.contractId
			houseDataInfo.value.name = renterInfo.lesseeName
			houseDataInfo.value.phone = renterInfo.lesseePhone
			houseDataInfo.value.label = renterInfo.lesseeName + '/' + renterInfo.lesseePhone

			entity.billForm.bizId = houseDataInfo.value.value
			searchOptions.options = [houseDataInfo.value]
			searchOptions.onSelect(props.houseId, houseDataInfo.value)
		})
	}
</script>
<style lang="less">
	.bill-add-dialog {
		.ant-modal-body {
			overflow: auto;
			height: 70vh;
			min-height: 600px;
			max-height: 900px;

			.ant-form-item-label {
				width: 120px;
			}
		}
	}
</style>
